<template>
  <div class="order-detail">
    <el-button class="back-btn" type="primary" @click="back">返回</el-button>
    <el-tabs
      v-model="data.activeTab"
      class="demo-tabs tabs-back"
      @tab-click="handleClickTab"
    >
      <el-tab-pane label="基本信息" name="info">
        <div class="order-wrap detail-wrap">
          <el-steps :active="4" align-center process-status="wait">
            <el-step
              title="准备充电"
              :description="
                data.detailData.startTime ? data.detailData.startTime : '--'
              "
            />
            <el-step
              title="开始充电"
              :description="
                data.detailData.startTime ? data.detailData.startTime : '--'
              "
            />
            <el-step
              title="结束充电"
              :description="
                data.detailData.endTime ? data.detailData.endTime : '--'
              "
            />
            <el-step
              title="订单支付"
              :description="
                data.detailData.orderCloseTime
                  ? data.detailData.orderCloseTime
                  : '--'
              "
            />
          </el-steps>
          <div class="order-reason">
            <div class="order-no">
              充电单号：{{
                data.detailData.startChargeSeq
                  ? data.detailData.startChargeSeq
                  : '--'
              }}
            </div>
			<div class="order-no">
			  电桩固件：{{data.firmware}}
			</div>
            <div class="reason">
              订单结束原因：{{
                data.detailData.stopMsg ? data.detailData.stopMsg : '--'
              }}
            </div>
          </div>
          <div class="price-card">
            <div class="card-data left">
              <div class="card-data">
                <div class="card-item card-item1">
                  <div class="content-title">
                    <div class="title">订单总金额</div>
                    <div class="card-value">
                      ￥{{
                        data.detailData.totalAmount
                          ? data.detailData.totalAmount
                          : '--'
                      }}
                    </div>
                  </div>
                  <div class="fee">
                    <div class="electric-charge">
                      电费：￥{{
                        data.detailData.totalElecMoney
                          ? data.detailData.totalElecMoney
                          : '--'
                      }}
                    </div>
                    <div class="service-charge">
                      服务费：￥{{
                        data.detailData.totalServiceMoney
                          ? data.detailData.totalServiceMoney
                          : '--'
                      }}
                    </div>
                  </div>
                </div>
                <div class="card-item">
                  <div class="title">订单总优惠</div>
                  <div class="card-value">
                    ￥{{
                      data.detailData.totalDiscounts
                        ? data.detailData.totalDiscounts
                        : '--'
                    }}
                  </div>
                </div>
                <div class="card-item card-item1">
                  <div class="content-title">
                    <div class="title">实收金额</div>
                    <div class="card-value card-value1">
                      ￥{{
                        data.detailData.actualAmount
                          ? data.detailData.actualAmount
                          : '--'
                      }}
                    </div>
                  </div>
                  <div class="fee">
                    <div class="electric-charge">
                      电费：￥{{
                        data.detailData.elecMoneyActual
                          ? data.detailData.elecMoneyActual
                          : '--'
                      }}
                    </div>
                    <div class="service-charge">
                      服务费：￥{{
                        data.detailData.serviceMoneyActual
                          ? data.detailData.serviceMoneyActual
                          : '--'
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right"></div>
          </div>
          <div class="order-info">
            <Detail
              :columns="2"
              :form="detailForm"
              :detail="data.detailData"
              align="right"
              class="order-detail"
            ></Detail>
          </div>
          <div class="edit-line"></div>

          <Head title="充电明细（注：设备上送、运营商推送信息）">
            <template #content>
              <div class="order-info">
                <Detail
                  :columns="2"
                  :form="detailForm1"
                  :detail="data.detailData"
                  align="right"
                ></Detail>
              </div>
              <div class="order-table">
                <el-table
                  :data="data.detailData.historyOrderPriceList"
                  :summary-method="getSummaries"
                  show-summary
                >
                  <el-table-column
                    prop="priceCategory"
                    :label="
                      data.protocolVersion == '1' ? '充电时段' : '价格类别'
                    "
                    align="center"
                  />
                  <el-table-column
                    prop="pricePower"
                    label="电费单价（元/度）"
                    align="center"
                  />
                  <el-table-column
                    prop="priceService"
                    label="服务费单价（元/度）"
                    align="center"
                  />
                  <el-table-column
                    prop="power"
                    label="充电度数（度）"
                    align="center"
                  />
                  <el-table-column
                    prop="timeCost"
                    label="费用（元）"
                    align="center"
                  />
                </el-table>
                <!-- <Table
                  ref="tableRef"
                  :columns="data.columns"
                  :isPagination="false"
                  :indexShow ="false"
                  :list="data.detailData.historyOrderPriceList"
                  showSummary
                  :summaryMethod="getSummaries"
                >
                </Table> -->
              </div>
            </template>
          </Head>
          <div class="edit-line"></div>

          <Head
            title="互联互通成本"
            v-if="data.entrancePlanResponse.length > 0"
          >
            <template #content>
              <div class="discount-info2">
                <div
                  class="discount-deduction-card-new"
                  v-for="(item, index) in data.entrancePlanResponse"
                  :key="index"
                >
                  <div class="card-top" :class="`card-top5`"></div>
                  <div class="card-content" :class="`card-content5`">
                    <div class="card-title">入口方案</div>
                    <div class="fee-content">
                      <div class="fee">
                        <div class="fee-title">订单成本</div>
                        <div class="money">{{ item.flowAmount }}元</div>
                      </div>
                      <div class="contont-value">
                        <div class="fee1">
                          <div class="fee-title">抵扣总费用</div>
                          <div class="money">
                            {{ item.discountTotalMoney }}元
                          </div>
                        </div>
                        <div class="fee1">
                          <div class="fee-title">抵扣电费</div>
                          <div class="money">{{ item.discountPower }}元</div>
                        </div>
                        <div class="fee1">
                          <div class="fee-title">抵扣服务费</div>
                          <div class="money">{{ item.discountService }}元</div>
                        </div>
                      </div>
                      <div class="fee">
                        <div class="fee-title">订单总金额</div>
                        <div class="money">{{ item.amount }}元</div>
                      </div>
                    </div>
                    <div :class="`line5`"></div>
                    <div class="circular1"></div>
                    <div class="circular2"></div>
                    <div class="bottom-card">
                      <span>方案名称：{{ item.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </Head>
          <div class="edit-line"></div>

          <Head title="优惠抵扣" v-if="data.discountsOrder.length > 0">
            <template #content>
              <div class="discount-info">
                <div
                  class="discount-deduction-card"
                  v-for="(item, index) in data.discountsOrder"
                  :key="index"
                >
                  <div
                    class="card-top"
                    :class="`card-top${item.discountType}`"
                  ></div>
                  <div
                    class="card-content"
                    :class="`card-content${item.discountType}`"
                  >
                    <div class="card-title">{{ item.discountName }}</div>
                    <div class="contont-value">
                      <div class="fee">
                        <div class="fee-title" v-if="item.discountType === '1'">
                          优惠电费
                        </div>
                        <div
                          class="fee-title"
                          v-if="
                            item.discountType === '2' ||
                            item.discountType === '3' ||
                            item.discountType === '5'
                          "
                        >
                          抵扣电费
                        </div>
                        <div class="fee-title" v-if="item.discountType === '4'">
                          抹零电费
                        </div>
                        <div class="money">{{ item.discountPower }}元</div>
                      </div>
                      <div class="fee">
                        <div class="fee-title" v-if="item.discountType === '1'">
                          优惠服务费
                        </div>
                        <div
                          class="fee-title"
                          v-if="
                            item.discountType === '2' ||
                            item.discountType === '3' ||
                            item.discountType === '5'
                          "
                        >
                          抵扣服务费
                        </div>
                        <div class="fee-title" v-if="item.discountType === '4'">
                          抹零服务费
                        </div>
                        <div class="money">{{ item.discountService }}元</div>
                      </div>
                      <div class="fee">
                        <div class="fee-title" v-if="item.discountType === '1'">
                          优惠总费用
                        </div>
                        <div
                          class="fee-title"
                          v-if="
                            item.discountType === '2' ||
                            item.discountType === '3' ||
                            item.discountType === '5'
                          "
                        >
                          抵扣总费用
                        </div>
                        <div class="fee-title" v-if="item.discountType === '4'">
                          抹零总费用
                        </div>
                        <div class="money">{{ item.discountTotalMoney }}元</div>
                      </div>
                    </div>
                    <div :class="`line${item.discountType}`"></div>
                    <div class="circular1"></div>
                    <div class="circular2"></div>
                    <div class="bottom-card">
                      <span v-if="item.discountType === '1'"
                        >活动名称：{{ item.name }}</span
                      >
                      <span v-if="item.discountType === '2'"
                        >会员等级：{{ item.name }}</span
                      >
                      <span v-if="item.discountType === '3'"
                        >优惠券编号：{{ item.nameNumber }}</span
                      >
                      <span
                        v-if="item.discountType === '3'"
                        style="margin-left: 6px"
                        >优惠券名称：{{ item.couponName }}</span
                      >
                      <span v-if="item.discountType === '5'"
                        >方案名称：{{ item.name }}</span
                      >
                    </div>
                  </div>
                </div>
                <div
                  class="discount-deduction-card"
                  v-if="data.discountsOrder.length % 2"
                ></div>
              </div>
            </template>
          </Head>
          <div class="edit-line"></div>

          <Head title="订单结算信息">
            <template #content>
              <div class="order-info">
                <Detail
                  :columns="2"
                  :form="detailForm2"
                  :detail="data.detailData"
                  align="right"
                ></Detail>
              </div>
            </template>
          </Head>
        </div>
      </el-tab-pane>
      <el-tab-pane label="实时数据（列表）" name="tableData" v-if="env_type">
        <Table
          v-if="data.activeTab === 'tableData'"
          ref="tableDataRef"
          :columns="tableData.columns"
		  :toolbar="tableData.toolbar"
          @get-list="getList"
        >
        </Table>
      </el-tab-pane>
      <el-tab-pane label="实时数据（图表）" name="charts" v-if="env_type">
        <div v-if="data.activeTab === 'charts'">
          <div class="charts-box1">
            <QcEchart
              :options="
                getLineChart(
                  '需求/输出电压',
                  data.chartsData,
                  '电压',
                  'V',
                  '1',
                  data.chartsType
                )
              "
              class="charts-warp"
            ></QcEchart>
          </div>
          <div class="charts-box2">
            <QcEchart
              :options="
                getLineChart(
                  '需求/输出电流',
                  data.chartsData,
                  '电流',
                  'A',
                  '2',
                  data.chartsType
                )
              "
              class="charts-warp"
            ></QcEchart>
          </div>
          <div class="charts-box3">
            <QcEchart
              :options="getGunLineChart('枪线温度', data.chartsGunData, '℃')"
              class="charts-warp"
            ></QcEchart>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
    
<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import QcEchart from '@/components/qcEchart/index.vue';
import { getLineChart, getGunLineChart } from '@/utils/chartOption';
import { queryDicByParent } from '@/service/apis/api';
import type { TableColumnCtx } from 'element-plus';
import { 
	getLabel,
	exportFile ,
} from '@/utils/utils';
import {
  getHistoryOrder,
  getHistoryChargeData,
  getHistoryChargePageData,
  getHistoryChargeExtendData,
  EXPORT_HISTORYDATAUSER,
} from '@/service/apis/order';
const route = useRoute();
const router = useRouter();
const {
  query: { id, type, startChargeSeq },
} = route;

const env_type = import.meta.env.VITE_ENV_TYPE !== 'ryc';
let data = reactive({
  activeTab: 'info',
  detailData: {} as any,
  discountsOrder: [] as any,
  entrancePlanResponse: [] as any,
  chartsData: [] as any,
  chartsGunData: [] as any,
  chartsType: '',
  firmware: '',
  startChargeSeq: '',
  protocolVersion: '',
  columns: [
    {
      prop: 'timeFrame',
      label: '充电时段',
    },
    {
      prop: 'pricePower',
      label: '电费单价（元/度）',
    },
    {
      prop: 'priceService',
      label: '服务费单价（元/度）',
    },
    {
      prop: 'power',
      label: '充电度数（度）',
    },
    {
      prop: 'timeCost',
      label: '费用（元）',
    },
  ],
});
let tableData = reactive({
  columns: [
    {
      prop: 'dataTime',
      label: '上送时间',
    },
    {
      prop: 'totalPower',
      label: '充电度数（度）',
      template: (row: any) => {
        return row?.totalPower?.toString() || '--';
      },
    },
    {
      prop: 'chargedTime',
      label: '充电时长（分钟）',
      template: (row: any) => {
        return row?.chargedTime?.toString() || '--';
      },
    },
    {
      prop: 'soc',
      label: '当前SOC(%)',
      template: (row: any, index: number) => {
        return row?.soc?.toString() || '--';
      },
    },
    {
      prop: 'totalMoney',
      label: '已充金额（元）',
      template: (row: any, index: number) => {
        return row?.totalMoney?.toString() || '--';
      },
    },
    {
      prop: 'voltage',
      label: '电压（V）',
      template: (row: any, index: number) => {
        return row?.voltage?.toString() || '--';
      },
    },
    {
      prop: 'current',
      label: '电流（A）',
      template: (row: any, index: number) => {
        return row?.current?.toString() || '--';
      },
    },
    {
      prop: 'gunTemperature',
      label: '枪线温度（℃）',
      template: (row: any, index: number) => {
        return row?.gunTemperature?.toString() || '--';
      },
    },
    {
      prop: 'batteryTemperature',
      label: '电池温度（℃）',
      template: (row: any, index: number) => {
        return row?.batteryTemperature?.toString() || '--';
      },
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'historicalOrderList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
		console.log('---------',tableDataRef.value.getForm())
        exportFile(
          EXPORT_HISTORYDATAUSER,
          '历史记录详情',
          // tableDataRef.value?.getForm()
		  data.startChargeSeq
        );
      },
    },
  ],
});
const detailForm = reactive([
  {
    label: '用户姓名',
    prop: 'userName',
    template: (row: any) => {
      return row?.userInfo?.userName ? row?.userInfo?.userName : '--';
    },
  },
  {
    label: '用户账号',
    prop: 'accountNumber',
    template: (row: any) => {
      return row?.userInfo?.accountNumber ? row?.userInfo?.accountNumber : '--';
    },
  },
  {
    label: '充电卡号',
    prop: 'cardNum',
    template: (row: any) => {
      return row?.userInfo?.cardNum ? row?.userInfo?.cardNum : '--';
    },
  },
  {
    label: '归属企业',
    prop: 'orgName',
    template: (row: any) => {
      return row?.userInfo?.orgName ? row?.userInfo?.orgName : '--';
    },
  },
  {
    label: '充电车辆',
    prop: 'plateNumber',
    template: (row: any) => {
      return row?.userInfo?.plateNumber ? row?.userInfo?.plateNumber : '--';
    },
  },
  {
    label: '车辆VIN码',
    prop: 'chargeVin',
    // template: (row: any) => {
    //   return row?.userInfo?.chargeVin ? row?.userInfo?.chargeVin : '--';
    // },
  },
  {
    label: '流量方流水号',
    prop: 'flowStartChargeSeq',
  },
  {
    label: '运营商流水号',
    prop: 'operatorSerialNumber',
  },
  {
    label: '终端编码',
    prop: 'connectorCode',
    template: (row: any) => {
      return row?.connectorInfo?.connectorCode
        ? row?.connectorInfo?.connectorCode
        : '--';
    },
  },
  {
    label: '电桩功率',
    prop: 'power',
    template: (row: any) => {
      return row?.connectorInfo?.power
        ? `${row?.connectorInfo?.power}kW`
        : '--';
    },
  },
  {
    label: '电站名称',
    prop: 'stationName',
    template: (row: any) => {
      return row?.connectorInfo?.stationName
        ? row?.connectorInfo?.stationName
        : '--';
    },
  },
  {
    label: '运营商',
    prop: 'operatorName',
    template: (row: any) => {
      return row?.connectorInfo?.operatorName
        ? row?.connectorInfo?.operatorName
        : '--';
    },
  },
]);
const detailForm1 = reactive([
  {
    label: '电表总启值',
    prop: 'electricityStartValue',
    template: (row: any) => {
      return row?.electricityStartValue == 0
        ? '0'
        : row?.electricityStartValue || '--';
    },
  },
  {
    label: '电表总止值',
    prop: 'electricityEndValue',
    template: (row: any) => {
      return row?.electricityEndValue == 0
        ? '0'
        : row?.electricityEndValue || '--';
    },
  },
]);
const detailForm2 = reactive([
  {
    label: '结算依据',
    prop: 'settleSource',
    dic: [] as any,
    type: Number,
  },
  {
    label: '异常原因',
    prop: 'abnormalCause',
    dic: [] as any,
    type: Number,
    template: (row: any, index: number) => {
      const abnormalCause = getLabel(row, detailForm2[1]);
      if (type == 'station') {
        if (row.abnormalRemark) {
          return `${abnormalCause}（${row.abnormalRemark}）`;
        } else {
          return `${abnormalCause}`;
        }
      } else {
        return `${abnormalCause}`;
      }
    },
  },
  {
    label: '实付电费',
    prop: 'elecMoneyActual',
    template: (row: any) => {
      return row?.elecMoneyActual ? `${row?.elecMoneyActual}元` : '--元';
    },
  },
  {
    label: '实付服务费',
    prop: 'serviceMoneyActual',
    template: (row: any) => {
      return row?.serviceMoneyActual ? `${row?.serviceMoneyActual}元` : '--元';
    },
  },
  {
    label: '企业钱包支付',
    prop: 'unitAmount',
    template: (row: any) => {
      return row?.unitAmount ? `${row?.unitAmount}元` : '--元';
    },
  },
  {
    label: '个人钱包支付',
    prop: 'personalAmount',
    template: (row: any) => {
      return row?.personalAmount ? `${row?.personalAmount}元` : '--元';
    },
  },
]);

interface SummaryMethodProps<T = object> {
  columns: TableColumnCtx<T>[];
  data: T[];
}
const getSummaries = (param: SummaryMethodProps) => {
  const { columns } = param;
  const tableData = param.data;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = `总时长：${data.detailData.chargedTime}`;
      return;
    }
    if (index === 3 || index === 4) {
      const values = tableData.map((item) =>
        Number(item[column.property as keyof typeof item] * 10000)
      );

      if (!values.every((value) => Number.isNaN(value))) {
        const arrValue = `${values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!Number.isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
          // return total/10000
        }, 0)}`;
        sums[index] = (Number(arrValue) / 10000).toFixed(4);
      } else {
        sums[index] = 'N/A';
      }
    }
  });

  return sums;
};
// 获取历史订单详情
getHistoryOrder({ orderId: id, startChargeSeq }).then((res: any) => {
  if (res) {
    data.detailData = res;
	data.firmware = res.connectorInfo.equipmentOwnerName;
    data.startChargeSeq = res.startChargeSeq;
    data.discountsOrder = data.detailData.discountsOrderList || [];
    data.entrancePlanResponse = data.detailData.entrancePlanResponse || [];
    data.protocolVersion = res.protocolVersion;
  }
});

// 获取实时数据
let tableDataRef = ref();
const getList = (page: any) => {
  getHistoryChargePageData(data.startChargeSeq, page).then((res: any) => {
    if (res) {
      console.log('res---', res);
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getList(page);
        return;
      }
      nextTick(() => {
        const arr = res.dataList || [];
        tableDataRef.value?.setTable({
          total: res.totalCount,
          table: [...arr],
        });
        data.chartsData = [...arr];
        data.chartsGunData = [...arr];
        data.chartsType = '1';
      });
    }
  });
};

const getChartList = (page: any) => {
  getHistoryChargeData(data.startChargeSeq, page).then((res: any) => {
    nextTick(() => {
      const arr = res || [];
      if (data.chartsType == '2') {
        data.chartsGunData = [...arr];
      } else {
        data.chartsData = [...arr];
        data.chartsGunData = [...arr];
        data.chartsType = '1';
      }
    });
  });
};

const getChart = () => {
  getHistoryChargeExtendData(data.startChargeSeq).then((res: any) => {
    nextTick(() => {
      const arr = res || [];
      if (arr.length == 0) {
        // data.chartsType = '1';
        // getChartList({ pageNo: -1, pageSize: -1 });
      } else {
        data.chartsType = '2';
        data.chartsData = [...arr];
      }
      getChartList({ pageNo: -1, pageSize: -1 });
    });
  });
};

// tab切换
const handleClickTab = (e: any) => {
  if (e.props.name === 'charts') {
    getChart();
  }
};

// 字典
queryDicByParent({
  listDtos: ['settlementBasic', 'abnormalBasic'],
}).then((res: any) => {
  if (res) {
    detailForm2[0].dic = [...res.settlementBasic];
    detailForm2[1].dic = [...res.abnormalBasic];
  }
});

const back = () => {
  router.go(-1);
};
</script>
<style lang="scss">
.order-detail {
  position: relative;

  .back-btn {
    position: absolute;
    right: 20px;
    top: 6px;
    z-index: 10;
  }
}

.order-wrap {
  .order-reason {
    display: flex;
    justify-content: space-around;
    font-weight: 500;
    font-size: 16px;
    color: #5073f7;
    width: 100%;
    margin-top: 20px;

    // padding: 0 100px;
    .order-no {
      width: 33%;
    }
  }

  .price-card {
    margin-top: 20px;
    width: 100%;
    height: 119px;
    // opacity: 0.36;
    // &::after {
    // background: linear-gradient(98.09deg, #6BA4FE 0%, #436DFF 73.83%);
    background: linear-gradient(
      98.09deg,
      rgba(107, 164, 254, 0.36) 0%,
      rgba(67, 109, 255, 0.36) 73.83%
    );
    // opacity: 0.36;
    // }
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      width: calc(100% - 128px);

      .card-data {
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #ffff;
        align-items: center;

        .card-item {
          text-align: center;

          .iconfont {
            font-size: 36px;
            line-height: 36px;
          }

          .title {
            margin-top: 2px;
            color: #555555;
            font-weight: 400;
            font-size: 15px;
            line-height: 23px;
          }

          .card-value {
            margin-top: 8px;
            font-weight: 700;
            font-size: 36px;
            line-height: 44px;
            color: #5073f7;
          }

          .card-value1 {
            color: #292d32;
            display: flex;
            align-items: center;
          }
        }

        .card-item1 {
          display: flex;
          align-items: flex-end;

          .fee {
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            margin-left: 10px;
            margin-bottom: 6px;
            color: #5073f7;
          }
        }
      }
    }

    .right {
      width: 128px;
      height: 118px;
      background-image: url(@/assets/images/order-wallet.png);
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 26px;
    }
  }

  .order-info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;

    .order-detail {
      margin-top: 20px;
    }
  }

  // .order-table {
  //   .el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition.has-footer.el-table.el-table--layout-fixed.is-scrolling-none{
  //     border: 1px solid #D4DBF5;
  //     border-radius: 0;
  //   }
  // }

  .discount-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;

    .discount-deduction-card {
      width: 45%;
      margin-bottom: 20px;

      .card-top {
        height: 15px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }

      .card-top1 {
        background-color: #fa3939;
      }

      .card-top2 {
        background-color: #5073f7;
      }

      .card-top3 {
        background-color: #ffc700;
      }

      .card-top4 {
        background-color: #9859ff;
      }
      .card-top5 {
        background-color: #01c68b;
      }

      .card-content {
        height: 140px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        .card-title {
          font-size: 13px;
          line-height: 22px;
          padding: 6px 0 0 15px;
        }

        .contont-value {
          display: flex;
          justify-content: space-around;

          .fee {
            margin-top: 15px;
            text-align: center;

            .fee-title {
              font-size: 12px;
              line-height: 18px;
              color: #262626;
            }

            .money {
              font-weight: 700;
              font-size: 16px;
              line-height: 22px;
              // color: #5073F7;
            }
          }
        }

        .line1 {
          margin-top: 25px;
          border-top: 2px dashed rgba(250, 57, 57, 0.3);
        }

        .line2 {
          margin-top: 25px;
          border-top: 2px dashed rgba(80, 115, 247, 0.3);
        }

        .line3 {
          margin-top: 25px;
          border-top: 2px dashed #ffc700;
        }

        .line4 {
          margin-top: 25px;
          border-top: 2px dashed rgba(152, 89, 255, 0.3);
        }
        .line5 {
          margin-top: 25px;
          border-top: 2px dashed rgba(1, 198, 139, 0.3);
        }

        .circular1 {
          width: 16px;
          height: 16px;
          border-radius: 8px;
          background-color: #fff;
          margin-top: -8px;
          margin-left: -8px;
        }

        .circular2 {
          width: 16px;
          height: 16px;
          border-radius: 8px;
          background-color: #fff;
          margin-top: -16px;
          margin-left: calc(100% - 8px);
        }

        .bottom-card {
          margin-top: -3px;
          padding: 0 12px;
          font-size: 11px;
          line-height: 22px;
          color: #555555;
          width: 94%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .card-content1 {
        background-color: rgba(254, 235, 235, 1);

        .money {
          color: #fa3939;
        }
      }

      .card-content2 {
        background-color: rgba(237, 241, 254, 1);

        .money {
          color: #5073f7;
        }
      }

      .card-content3 {
        background-color: rgba(255, 251, 235, 1);

        .money {
          color: #ffc700;
        }
      }

      .card-content4 {
        background-color: rgba(152, 89, 255, 0.1);

        .money {
          color: #9859ff;
        }
      }
      .card-content5 {
        background-color: rgba(1, 198, 139, 0.1);

        .money {
          color: #01c68b;
        }
      }
    }
  }
  .discount-info2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
    .discount-deduction-card-new {
      width: 95%;
      margin-bottom: 20px;
      .card-top {
        height: 15px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      .card-top5 {
        background-color: #01c68b;
      }

      .card-content {
        height: 140px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        .fee-content {
          display: flex;
          justify-content: space-around;
        }
        .fee {
          margin-top: 15px;
          text-align: center;

          .fee-title {
            font-size: 12px;
            line-height: 18px;
            color: #262626;
          }

          .money {
            font-weight: 700;
            font-size: 16px;
            line-height: 22px;
            // color: #5073F7;
          }
        }

        .card-title {
          font-size: 13px;
          line-height: 22px;
          padding: 6px 0 0 15px;
        }

        .contont-value {
          display: flex;
          justify-content: space-around;
          width: 50%;
          border: 1px dashed rgba(1, 198, 139, 0.3);
          border-radius: 5px;

          .fee1 {
            // margin-top: 15px;
            padding: 6px;
            text-align: center;

            .fee-title {
              font-size: 12px;
              line-height: 18px;
              color: #262626;
            }

            .money {
              font-weight: 700;
              font-size: 16px;
              line-height: 22px;
              // color: #5073F7;
            }
          }
        }

        .line5 {
          margin-top: 25px;
          border-top: 2px dashed rgba(1, 198, 139, 0.3);
        }

        .circular1 {
          width: 16px;
          height: 16px;
          border-radius: 8px;
          background-color: #fff;
          margin-top: -8px;
          margin-left: -8px;
        }

        .circular2 {
          width: 16px;
          height: 16px;
          border-radius: 8px;
          background-color: #fff;
          margin-top: -16px;
          margin-left: calc(100% - 8px);
        }

        .bottom-card {
          margin-top: -3px;
          padding: 0 12px;
          font-size: 11px;
          line-height: 22px;
          color: #555555;
          width: 94%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .card-content5 {
        background-color: rgba(1, 198, 139, 0.1);

        .money {
          color: #01c68b;
        }
      }
    }
  }

  .discount-info1 {
    justify-content: flex-start;
    margin-left: 40px;
  }
}

.charts-box1,
.charts-box2,
.charts-box3 {
  // background: #fff;
  border: 1px solid #b3c1f6;
  // width: cale(100% - 20px);
  width: calc(100% - 20px);
  margin: 20px 10px;
  height: 336px;
  box-sizing: border-box;

  .charts-warp {
    width: 100%;
    height: 100%;
  }
}
</style>
    